import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import MUtil from '../../utils/mm'
import User from '../../service/user-service';

const _user = new User();
const _mm = new MUtil();

class TopNav extends Component {
  constructor(props) {
    super(props);
    this.state = {
			username: _mm.getStorage('userInfo').username || ''
		};
  }
  // 退出登录
  onLogout = () => {
    console.log('退出登录');
		_user.logout().then(res => {
			_mm.removeStorage('userInfo')
			window.location.href = '/login'
		})
  }
  render() {
    return (
      <div>
        <div className="navbar navbar-default top-navbar" role="navigation">
          <div className="navbar-header">
            <Link className="navbar-brand" to="/" href="index.html"><b>HAPPY</b>MMALL</Link>
          </div>

          <ul className="nav navbar-top-links navbar-right">
            <li className="dropdown">
              <a className="dropdown-toggle" href="javascript: void(0);" aria-expanded="false">
                <i className="fa fa-user fa-fw"></i>
								{
									this.state.username
									? <span>欢迎{this.state.username}</span>
									: <span>欢迎您</span>
								}

                <i className="fa fa-caret-down"></i>
              </a>
              <ul className="dropdown-menu dropdown-user">
                <li>
                  <span onClick={() => { this.onLogout() }}>
                    <i className="fa fa-sign-out fa-fw"></i>
                    <span>登录退出</span>
                  </span>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

export default TopNav;
